import React, { PureComponent } from 'react';
import styled, { keyframes } from 'styled-components';

// 滚动动画
const scrollUp = keyframes`
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.4rem); /* 每次滚动一行的高度 */
  }
`;

// 新行出现动画
const fadeInUp = keyframes`
  0% {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;

const TableContainer = styled.div`
  height: calc(100% - 0.05rem); /* 让表格几乎占满整个容器 */
  margin-top: 0.01rem; /* 极小的顶部边距 */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(0, 153, 255, 0.3);
`;

const TableWrapper = styled.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  font-size: 0.18rem; /* 大幅增加基础字体 */
  color: #ffffff;
  position: relative;
`;

const TableHeader = styled.thead`
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 204, 255, 0.3) 100%);
  position: relative;
  z-index: 2;
`;

const HeaderCell = styled.th`
  padding: 0.08rem 0.06rem; /* 增加内边距 */
  text-align: center;
  font-weight: bold;
  color: #00ffff;
  border: 1px solid rgba(0, 153, 255, 0.3);
  font-size: 0.18rem; /* 大幅增加标题字体 */
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
`;

const TableBody = styled.tbody`
  position: relative;
  
  /* 滚动动画 */
  &.scrolling {
    animation: ${scrollUp} 0.5s ease-in-out;
  }
`;

const TableRow = styled.tr`
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.1);
  height: 0.4rem; /* 增加行高以适应更大字体 */
  
  &:nth-child(even) {
    background: rgba(0, 102, 255, 0.05);
  }
  
  &.new-row {
    animation: ${fadeInUp} 0.5s ease-in-out;
  }
  
  &:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 153, 255, 0.15) 100%);
    transform: scale(1.02);
    box-shadow: 0 0.02rem 0.1rem rgba(0, 255, 255, 0.3);
    
    .rank-cell {
      color: #ffff00;
      text-shadow: 0 0 0.15rem rgba(255, 255, 0, 0.8);
    }
    
    .product-id-cell {
      color: #ffffff;
      text-shadow: 0 0 0.12rem rgba(255, 255, 255, 0.8);
    }
    
    .data-cell {
      color: #00ffff;
      text-shadow: 0 0 0.12rem rgba(0, 255, 255, 0.8);
    }
  }
`;

const DataCell = styled.td`
  padding: 0.06rem 0.05rem; /* 增加内边距 */
  text-align: center;
  border: 1px solid rgba(0, 153, 255, 0.2);
  font-size: 0.15rem; /* 大幅增加字体大小 */
  transition: all 0.3s ease;
  height: 0.4rem; /* 增加行高 */
  vertical-align: middle;
`;

const RankCell = styled(DataCell)`
  font-weight: bold;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.15);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
  font-size: 0.16rem; /* 排名字体稍大 */
`;

const ProductIdCell = styled(DataCell)`
  color: #00ccff;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.8);
  font-size: 0.14rem; /* 商品ID字体 */
`;

const ScrollIndicator = styled.div`
  position: absolute;
  top: 0.5rem;
  right: 0.1rem;
  width: 0.04rem;
  height: calc(100% - 1rem);
  background: rgba(0, 255, 255, 0.2);
  border-radius: 0.02rem;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: rgba(0, 255, 255, 0.8);
    border-radius: 0.02rem;
    animation: ${keyframes`
      0% { top: 0; }
      100% { top: 80%; }
    `} 3s infinite ease-in-out;
  }
`;

class TopProductsTable extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      displayData: [],
      isScrolling: false,
      currentIndex: 0,
    };
    this.scrollTimer = null;
  }

  componentDidMount() {
    console.log('Top10商品表格组件已加载 - 启用滚动更新功能');
    this.initializeScrollData();
    this.startAutoScroll();
  }

  componentWillUnmount() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
    }
  }

  // 生成完整的10条模拟数据
  generateMockData = () => {
    const productIds = [
      '38445720', '2032668', '2331270', '138964', '3031354',
      '4562789', '7891234', '9876543', '1234567', '5678901'
    ];
    
    return productIds.map((id, index) => ({
      rank: index + 1,
      productId: id,
      clicks: Math.floor(Math.random() * 3000000) + 100000,
      favorites: Math.floor(Math.random() * 2500000) + 800000,
      cart: Math.floor(Math.random() * 3500000) + 1000000,
      purchases: Math.floor(Math.random() * 3500000) + 1000000
    }));
  };

  // 初始化显示数据
  initializeScrollData = () => {
    try {
      // 显示完整的10条数据
      const mockData = this.generateMockData();
      this.setState({ 
        displayData: mockData,
        currentIndex: 0
      });
      
      console.log('初始化Top10商品数据(共10条):', mockData);
    } catch (error) {
      console.error('初始化Top10商品数据失败:', error);
    }
  };

  // 开始自动滚动
  startAutoScroll = () => {
    try {
      this.scrollTimer = setInterval(() => {
        this.scrollToNext();
      }, 3000); // 每3秒滚动一次
      
      console.log('Top10商品表格自动滚动已启动');
    } catch (error) {
      console.error('启动自动滚动失败:', error);
    }
  };

  // 滚动到下一条数据 - 重新生成所有数据
  scrollToNext = () => {
    try {
      // 设置滚动状态
      this.setState({ isScrolling: true });

      setTimeout(() => {
        // 重新生成10条数据
        const newMockData = this.generateMockData();
        
        this.setState({
          displayData: newMockData,
          isScrolling: false
        });

        console.log('Top10商品数据已更新');

      }, 250); // 滚动动画持续时间的一半

    } catch (error) {
      console.error('滚动更新失败:', error);
      this.setState({ isScrolling: false });
    }
  };

  formatNumber = (num) => {
    try {
      if (typeof num === 'number') {
        return num.toLocaleString();
      }
      return num;
    } catch (error) {
      console.error('数字格式化失败:', error);
      return num;
    }
  };

  render() {
    const { displayData, isScrolling } = this.state;
    
    return (
      <TableContainer>
        <TableWrapper>
          <Table>
            <TableHeader>
              <tr>
                <HeaderCell>排名</HeaderCell>
                <HeaderCell>商品ID</HeaderCell>
                <HeaderCell>点击</HeaderCell>
                <HeaderCell>收藏</HeaderCell>
                <HeaderCell>加购物车</HeaderCell>
                <HeaderCell>购买</HeaderCell>
              </tr>
            </TableHeader>
            <TableBody className={isScrolling ? 'scrolling' : ''}>
              {displayData.map((item, index) => (
                <TableRow key={`${item.productId}-${item.rank}-${index}`} className={item.isNew ? 'new-row' : ''}>
                  <RankCell className="rank-cell">
                    {item.rank}
                  </RankCell>
                  <ProductIdCell className="product-id-cell">
                    {item.productId}
                  </ProductIdCell>
                  <DataCell className="data-cell">
                    {this.formatNumber(item.clicks)}
                  </DataCell>
                  <DataCell className="data-cell">
                    {this.formatNumber(item.favorites)}
                  </DataCell>
                  <DataCell className="data-cell">
                    {this.formatNumber(item.cart)}
                  </DataCell>
                  <DataCell className="data-cell">
                    {this.formatNumber(item.purchases)}
                  </DataCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          
          {/* 滚动指示器 */}
          <ScrollIndicator />
        </TableWrapper>
      </TableContainer>
    );
  }
}

export default TopProductsTable; 